<template>
  <div class="tableContainer">
    <el-table
      ref="dataTables"
      :header-cell-class-name="xheader"
      :row-class-name="tableRowClassName"
      :data="tabelBody"
      style="width: 100%"
      :border="true"
      :height="availableHeight"
      :highlight-current-row="!tableConfig.selection"
      @selection-change="selectionChange"
      @row-click="clickChange"
    >
      <el-table-column type="selection" v-if="tableConfig.selection" width="55">
      </el-table-column>
      <el-table-column
        type="index"
        v-if="tableConfig.index"
        :index="indexMethod"
         label="序号"
        width="90"
      >
      </el-table-column>
      <el-table-column
        v-if="tableConfig.id"
        prop="id"
        label="ID"
        width="90"
      ></el-table-column>
      <template v-for="(item, index) in tableHead">
        <el-table-column
          v-if="item.columnType === 'slot'"
          :key="index"
          :label="tem.label"
          :width="item.width"
        >
          <template slot-scope="scope">
            <slot :name="item.slotName" :row="scope.row" :index="scope.$index" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="item.overflow"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.isScope">
              {{ item.scopeData[scope.row[item.prop]] || "" }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      v-if="total != -1"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="page.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { mapGetters} from "vuex";
export default {
  name: "Table",
  data: function () {
    return {
      rowIndex:-1,
      lineData: [],
    };
  },
  computed: {
    ...mapGetters(["fullHeight", "h1", "h2"]),
    availableHeight: function (val) {
      if (this.height > 0) {
        return this.height;
      }
      else {
        return this.fullHeight - this.h1 - this.h2 - 136;
      }
    },
  },
  props: ["tableHead", "tabelBody", "tableConfig", "total", "height", "page"],
  methods: {
    tableRowClassName ({row, rowIndex}) {
      row.index = rowIndex;
    },
    indexMethod(index) {
      return index + 1;
    },
    xheader: function () {
      return "xheader";
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.$emit("getData", this.page);
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.$emit("getData", this.page);
    },
    // 多选时返回数组
    selectionChange(val) {
      // console.log(e)
      this.$emit("rowSelect", val,e);
    },
    // 点选时返回对象
    clickChange(val) {
      this.$emit("rowSelect", val);
    }
  },
};
</script>
